<template>
	<view class="container">
		<view class="header">
			<text>{{ loginUserName }}-欢迎您!</text>
			<button class="dispose" id="toChatPage" @click="toChatPage">进入咨询界面</button>
		</view>
		<view class="appointmentList">
			<view class="listTitle">操作</view>
			<uni-table border stripe emptyText="暂无更多数据" id="listBox">
				<uni-tr>
					<uni-th align="center">姓名</uni-th>
					<uni-th align="center">性别</uni-th>
					<uni-th align="center">电话</uni-th>
					<uni-th align="center">预约类型</uni-th>
					<uni-th align="center">预约时间</uni-th>
					<uni-th align="center">状态</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in allAppointmentInfo" :key="index">
					<uni-td align="center">{{ item.studentName }}</uni-td>
					<uni-td align="center">{{ item.gender }}</uni-td>
					<uni-td align="center">{{ item.contactWay }}</uni-td>
					<uni-td align="center">{{ item.appointmentType }}</uni-td>
					<uni-td align="center">{{ item.appointmentTime }}</uni-td>
					<uni-td align="center">{{ item.status | appointmentInfoHandle}}</uni-td>
					<uni-td align="center" class="oprations">
						<button class="dispose" @click="oprationHandle(item,'1')">接诊</button>
						<button class="accomplish" @click="oprationHandle(item , '2')">完成</button>
						<button type="warn" @click="oprationHandle(item, '3')">错过</button>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from "vuex";
	export default {
		data() {
			return {
				// 所有预约信息
				allAppointmentInfo:[]
			};
		},
		computed:{
			...mapState("my_user",["loginUserName"])
		},
		methods:{
			...mapMutations('my_chatHistory',['addChatList','setFlag']),
			// 进入聊天列表页面
			toChatPage(){
				uni.navigateTo({
					url:"/pages/chatlist/chatlist"
				})
			},
			// 操作处理
			oprationHandle(item, status){
				let that = this;
				console.log(item);
				// 处理状态
				uni.request({
					url:"http://47.115.220.91:8787/doctorPages?uid="+item.uid+"&status="+ status,
					method:"PUT",
					success(res) {
						console.log("修改状态：",res.data);
						// 重载数据
						that.getAllAppointmentInfo();
						// 广播数据重载指令
						that.webSocketSendInfo();
					}
				});
				// 修改预约操作的医生
				uni.request({
					url:"http://47.115.220.91:8787/studentPages/modifyType?uid="+ item.uid+"&doctorName="+this.loginUserName,
					method:"PUT",
					success(res) {
						console.log(res.data);
					}
				})
			},
			//获取所有预约信息
			getAllAppointmentInfo(){
				let that = this;
				uni.request({
					url:"http://47.115.220.91:8787/doctorPages",
					method:"GET",
					success(res) {
						that.allAppointmentInfo = res.data.data;
					}
				})
			},
			// 连接并监听消息
			getWebSocketLink(){
				let that = this;
				// 连接
				uni.connectSocket({
				  url: 'ws://localhost:8787/myWebSocket',
				  success(res) {
					console.log("WebSocket连接成功！！");
				  }
				});
				let bindMsg = "$$" + that.loginUserName;
				// 开启连接，发送绑定连接
				uni.onSocketOpen(function (res) {
					uni.sendSocketMessage({
						// 连接，用于接收重载信息
						data: bindMsg
					});
					uni.sendSocketMessage({
					  data: "maohe101"
					});
				});
				// 监听
				uni.onSocketMessage(function (res) {
					console.log('收到服务器内容：' + res.data);
					if("reload" === res.data){
						// 重载数据
						that.getAllAppointmentInfo();
					}
					if(res.data.startsWith('@@')){ // @@开头，判定为私聊
						console.log("收到了私聊");
						// 截取主体内容
						let msg = res.data.substring(2);
						// 获取分隔符索引
						let separatorIndex = msg.indexOf('@@')
						// 获取信息来源用户名
						let sourceName = msg.substring(0,separatorIndex);
						// 获取收到的私聊消息
						let getMsg = msg.substring(separatorIndex + 2);
						console.log(getMsg);
						// 构造对象
						const chatObj = {
							name:sourceName,
							content:getMsg,
							who:"other"
						}
						that.addChatList(chatObj)
						// 修改vuex中的更新标识
						that.setFlag(true);
					}
					
				});
			},
			// 广播发送更新指令
			webSocketSendInfo(){
				// 获取临时连接，在后端将被kill掉
				uni.connectSocket({
				  url: 'ws://localhost:8787/myWebSocket',
				  success(res) {
					console.log("临时的WebSocket连接成功！！");
					
				  }
				});
				// // 发送消息
				uni.onSocketOpen(function (res) {
					console.log("发送重载消息指令");
					uni.sendSocketMessage({
					  data: "maohe101"
					});
				});
			}
		},
		mounted() {
			uni.showMsg("欢迎使用！！！")
			// console.log(this.loginUserName);
			// 获取所有预约信息
			this.getAllAppointmentInfo();
			// 连接WebSocket
			this.getWebSocketLink();
			// 广播重载数据消息,让学生端重新获取到新上线的医生
			// this.webSocketSendInfo();
		},
		filters:{
			// 预约处理状态过滤器
			appointmentInfoHandle(value){
				switch (value) {
				    case "0":
				      return '待处理';
				    case "1":
				      return '正在处理';
				    case "2":
				      return '已处理';
				    case "3":
				      return '已错过';
				    default:
				      return '';
				  }
			}
		}
	}
</script>

<style lang="scss">
	.oprations{
		display: flex;
		flex-direction: row;
	}
	
	.dispose{
		background-color: #4dadc7;
	}
	
	.accomplish{
		background-color: #6bff81;
	}
	
	.header{
		display: flex;
		font-family: "幼圆";
		color: black;
		font-weight: 600;
	}
	
	#toChatPage{
		color: white;
	}
</style>
